<template>
	<view class="voice-in">
		<text class="cuIcon-voicefill text-gray" @touchstart="recordStart" @touchend="recordStop"></text>
		
		<view class="modal" v-show="recording">
			<image src="../static/images/ic_voice.png" mode="aspectFill"></image>
		</view>
	</view>
	
</template>

<script setup lang="ts">
import { onMounted, reactive, ref, Ref } from 'vue';
import { voice2Text } from "@/utils/common"
// #ifdef H5
import dd from "gdt-jsapi"
// #endif

const emit = defineEmits(['updateText'])

const recording:Ref<boolean> = ref(false)
const recordingFinished:Ref<boolean> = ref(false)

const recordStart = ():void => {
	dd.startRecordAudio({}).then((res) => {
		console.log(res)
		recording.value = true	
	}).catch(err => {
		console.log(err)
	})
}

const recordStop = ():void => {
	dd.stopRecordAudio({}).then((res:any) => {
		recording.value = false
		recordingFinished.value = true
			
		voice2Text(res.mediaId)
			.then((res) => {
				emit("updateText", res)
			})
		
	}).catch(() => {
		recording.value = false
	})
}


onMounted(() => {
	dd.onRecordAudioEnd({}).then((res) => {
		console.log("超时自动结束")
		
		voice2Text(res.mediaId)
			.then((res) => {
				emit("updateText", res)
			})
	}).catch((err) => {
		console.log(err)
	})
})

</script>

<style lang="stylus" scoped>
.voice-in
	position: absolute
	top: 46rpx
	right: 50rpx
	font-size 38rpx
	z-index: 99
		
.modal
	width: 200rpx
	height: 200rpx
	padding: 25rpx
	position: fixed
	background-color: rgb(0, 0, 0)
	top: calc(50vh - 100rpx)
	left: calc(50vw - 100rpx)
	opacity: 0.3
	border-radius: 12rpx
	image
		width: 100%
		height: 100%
</style>